<template>
    <div class="live-banner" :class="{ 'live-banner-2': !LiveSetting.notice }" v-if="LiveSetting.livestate == 1">
        <img class="live-img" :src="LiveSetting.notice
            ? `${_oss_}images/p-live-ad.png?x-oss-process=image/format,webp`
            : `${_oss_}images/p-live-ad-2.png?x-oss-process=image/format,webp`
            " />

        <div class="livetime">直播时间：{{ LiveSetting.livetime }}</div>
        <img class="livecode" :src="LiveSetting.livecode" />

        <div class="notice-box" v-if="LiveSetting.notice">
            <img :src="_oss_ + 'images/icon-notice.png'" />
            云空间升级维护通知：{{ LiveSetting.notice }}
        </div>
    </div>
</template>
<script setup>
import { useContent } from ".";

const { LiveSetting, GetLiveSetting } = useContent();

GetLiveSetting();
</script>
<style lang="scss" scoped>
.live-banner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    // padding: 10px 0;

    .notice-box {
        position: absolute;
        top: 19.5%;
        left: 26%;
        width: 53%;
        height: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 600;
        font-size: 0.8vw;
        letter-spacing: 1px;

        img {
            width: 1.2%;
            margin-right: 2%;
        }
    }

    .live-img {
        width: 100%;
        display: block;
    }

    .livecode {
        position: absolute;
        left: 20%;
        top: 50%;
        width: 4%;
        transform: translateY(-50%);
    }

    .livetime {
        position: absolute;
        right: 22%;
        top: 62%;
        color: #fff;
        font-size: 0.8vw;
    }

    &.live-banner-2 {
        .livecode {
            left: 21%;
        }

        .livetime {
            right: 22.5%;
            top: 48%;
        }
    }
}
</style>
